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The Form Designer allows you to easily design HTML forms using a intuitive graphical interface. You can then edit the 
generated HTML source to fine tune your form. The Form Designer uses a drag-n-drop metaphor for laying out and designing 
forms. The HTML form objects that can be dragged onto the Form include: 



Text 

Checkbox 
RadioButton 
Text Are a 
Password 



Submit 
Reset 
Select 
Paragraph 



Form elements are dropped onto the Form Designer by selecting (clicking) the button corresponding to the form element. The 
cursor is then moved to the Form pane where the form element is dropped. You can rearrange Form elements on the Form 
pane by selecting (left-mouse click) and dragging. Once the form elements are arranged, you can edit their attributes by 
right-mouse clicking on the form element in the Form pane. Form elements can be deleted from the Form pane by right-mouse 
clicking on the element and then choosing the Delete option. You can preview the Form using the Preview button. This will . 
launch a built-in previewer (Pro only ) which will give a reasonable indication of how the Form will appear within the document , 
as viewed with a web browser. The Source button allows you to view the source HTML code which will be inserted within your 
document once you press the OK button. 

The Form element is used to delimit a data input form. There can be several forms in a single document, but the Form element 
cant be nested. The ACTION attribute is a URL specifying the location to which the contents of the form is submitted to elicit a 
response. If the ACTION attribute is missing, the URL of the document itself is assumed. The way data is submitted varies with 
the access protocol of the URL, and with the values of the METHOD and ENCTYPE attributes. 
In general: 

the METHOD attribute selects variations in the protocol. 

the ENCTYPE attribute specifies the format of the submitted data in case the protocol does not impose a format itself. 
When the ACTION attribute is set to an HTTP URL, the METHOD attribute must be set to an HTTP method as defined by the 
HTTP method specification in the IETF draft HTTP standard. The default METHOD is GET, although for many applications, the 
POST method may be preferred. With the post method, the ENCTYPE attribute is a MIME type specifying the format of the 
posted data; by default, is application/x-www-form-urlencoded. Under any protocol, the submitted contents of the form logically 
consist of name/value pairs. The names are usually equal to the NAME attributes of the various interactive elements in the form. 

NOTE: The names are not guaranteed to be unique keys, nor are the names of form elements required to be distinct. The 
values encode the user's input to the corresponding interactive elements. Elements capable of displaying a textual or numerical 
value will return a name/value pair even when they receive no explicit user input. 

The inclusion of the Form elements, allowing user input/feedback on HTML documents, was the major difference between the 
HTML specification 2.0 and its predecessors. Forms are created by placing input fields within paragraphs, p reformatted/I it era I 
text and lists. This gives considerable flexibility in designing the layout of forms. 
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Form Elements : 

<FORM>... </FORM> 
<INPUT...> ... </INPUT> 
<OPTION> 

<SELECT>... <SELECT> 
<TEXTAREA ...>... </TEXTAREA> 



A form within a document 
One input field 

One option within a Select element. 
A selection from a finite set of options 
A multi-line input field 



Each variable field is defined by an INPUT, TEXTAREA, or OPTION element and must have a NAME attribute to identify its 
value in the data returned when the form is submitted. 

Example of use (a questionnaire form): 

<H3>Sample Quest ionnaire</H3> 
<P>Please fill out this questionnaire: 

<FORH METHOD="POST" ACTION="http : //uwu . ist . ca/ sample "> 

<P>Your name: < INPUT NAHE="name" size="48"> 

<P>Hale <INPUT NAHE="gender " TYPE=RADIO VALUE="male"> 

<P>Female < INPUT NAHE= "gender " TYPE=RADIO VALUE= "female "> 

<P>Number in family: < INPUT NAHE= "family" TYPE=text> 

<P>Cities in which you maintain a residence: 

<UL> 

<LI>Hontreal< INPUT NAHE="city" TYPE-checktoox VALUE="montreal"> 
<LI>New York< INPUT NAHE="city" TYPE=checktoox VALUE="neuyork"> 

<LI>Other <TEXTAREA NAME="other" cols=48 rows=4X/textarea> 
</UL> 

Nickname: < INPUT NAHE= "nickname" SIZE="42"> 
<P>Thank you for responding to this questionnaire. 
<P>< INPUT TYPE-SUBHIT> < INPUT TYPE=RESET> 
</FORH> 

In the example above, the <P> and <UL> elements have been used to lay out the text and input fields. The HTML browser is 
responsible for handling which field will currently get keyboard, input. 

Many platforms have existing conventions for forms, for example, using Tab and Shift keys to move the keyboard focus forwards 
and backwards between fields, and using the Enter key to submit the form. In the example, the SUBMIT and RESET buttons 
are specified explicitly with special purpose fields. The SUBMIT button is used to e-mail the form or send its contents to the 
server as specified by the ACTION attribute, while RESET resets the fields to their initial values. When the form consists of a 
single text field, it may be appropriate to leave such buttons out and rely on the Enter key. 



The Input element is used for a large variety of types of input fields. 
Textarea element. 



To let users enter more than one line of text, use the 



HTTP File Upload: It is possible to write forms that ask for files as input, rather than input boxes and other simple elements 
such as checkboxes and radio buttons. 

An example of such a form would be: 

<FORM ENCTYPE= "multipart/ form-data" ACTION="_URL_" HETHOD=POST> 
Send this file: < INPUT NAHE= f, userf ile" TYPE="file"> 
< INPUT TYPE= "submit " VALUE="Send File"> 
</FORH> 

NOTE : This method of file upload is not yet standard. The Internet Draft , "Form based file upload in HTML", suggested adding 
a FILE option to the TYPE attribute of the INPUT element, allowing an ACCEPT attribute for the INPUT element (which is a list 
of media types or type patterns allowed for the input) and allowing the ENCTYPE of a form to be multipart/form-data. 
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Test with Netscape I 



<FORM METHOD- 1 POST" EtTCTHPE= l, multipart7£ orm-data"> 

<IHPUT TYPE- 11 radio" HBME^ radio 06">Radio Button<P> 

<IHPUT TXPE=" radio" HflME= H radio 07">Radio Button<P> 

<IHPUT T3£PE=" radio" ITA11E- 1 radio 08" CHECKED>Radio Button<P> 

<TEXTAREA HJlHE- n textQ2" ROflS=6 COLS=20> 

</TEXTAREA> 

<IHPUT T*PE=" submit" tmHE=" Submit" VaLUE=" Submit"> 
</FORM> 
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